import TinyReact from './TinyReact'

const root = document.getElementById('root')

// const virtualDOM1 = (
//   <div className="container">
//     <h1 className="test">你好 Tiny React</h1>
//     <h2>(编码必杀技)</h2>
//     <div>
//       嵌套1 <div>嵌套 1.1</div>
//     </div>
//     <h3>(观察: 这个将会被改变)</h3>
//     {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
//     {2 == 2 && <div>2</div>}
//     <span>这是一段内容</span>
//     <button onClick={() => alert('你好')}>点击我</button>
//     <h3>这个将会被删除</h3>
//     2, 3
//   </div>
// )

// const virtualDOM2 = (
//   <div className="container">
//     <h1 className="test123">你好 Tiny React</h1>
//     <h2>(编码必杀技)</h2>
//     <div>
//       嵌套1 <div>嵌套 1.1</div>
//     </div>
//     <h1>(观察: 这个将会被改变)</h1>
//     {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
//     {2 == 2 && <div>2</div>}
//     <span>这是一段被修改过的内容</span>
//     <button onClick={() => alert('你好!!!')}>点击我</button>
//     2, 3
//   </div>
// )

// TinyReact.render(virtualDOM1, root)

// setTimeout(() => {
//   TinyReact.render(virtualDOM2, root)
// }, 2000)

// TinyReact.render(virtualDOM, root)
function Demo() {
  return <div>Hello</div>
}

function Heart(props) {
  return (
    <div>
      {props.title}
      &hearts; <Demo />
    </div>
  )
}

// TinyReact.render(<Heart title="Hello React"/>, root)

// class Alert extends TinyReact.Component {
//   constructor(props) {
//     super(props)
//   }

//   render() {
//     return (
//       <div>
//         {this.props.name}
//         {this.props.age}
//       </div>
//     )
//   }
// }

// TinyReact.render(<Alert name="foo" age={20} />, root)

class Alert extends TinyReact.Component {
  constructor(props) {
    super(props)
    this.state = {
      title: 'Default Title'
    }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.setState({
      title: 'Changed Title'
    })
  }

  componentWillReceiveProps(nextProps) {
    console.log(nextProps)
  }

  componentWillUpdate() {
    console.log('will')
  }

  componentDidUpdate() {
    console.log('did update')
  }

  componentDidMount() {
    console.log('did mount')
  }

  render() {
    return (
      <div class="container">
        {this.props.name}
        {this.props.age}
        <div>
          {this.state.title}
          <button onClick={this.handleClick}>改变 Title</button>
        </div>
      </div>
    )
  }
}

TinyReact.render(<Alert name="张三" age={20} />, root)

setTimeout(() => {
  TinyReact.render(<Alert name="李四" age={21} />, root)
  // TinyReact.render(<Heart title="Hi" />, root)
}, 2000)
